<template>
  <vPage>
    <v-form ref="formRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-form
          class="vx-table__form-content"
          :model="form"
          label-align="right"
          label-width="100"
          size="default"
          label-position="top"
        >
          <el-date-picker
            v-model="form.performance_month"
            type="month"
            value-format="YYYY-MM-DD"
            placeholder="绩效月份"
          />

          <el-select
            v-model="form.status"
            collapse-tags
            placeholder="状态"
            clearable
            class="!w-[120px]"
            multiple
          >
            <el-option
              v-for="item of options['assignment.ImagesAssignment']?.[0].statusText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <VGroup>
            <el-select
              class="selectClass !w-[100px]"
              v-model="form.dateRange.type"
              collapse-tags
              placeholder="创建时间"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-model="form.dateRange.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="defaultTime()"
            />
          </VGroup>
          <VGroup>
            <el-select class="selectClass !w-[120px]" v-model="form.productName.type">
              <el-option
                v-for="item of productOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <multi-input
              clearable
              v-model="form.productName.value"
              style="width: 180px"
              placeholder="批量搜索,一行一个"
            ></multi-input>
          </VGroup>
          <el-select
            v-model="form.is_delay"
            class="!w-[160px]"
            placeholder="是否分配周期内完成"
            clearable
          >
            <el-option
              v-for="item in options['assignment.ImagesAssignment']?.[0].isDelayText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.is_exceed_task"
            class="!w-[160px]"
            placeholder="是否超额任务"
            clearable
          >
            <el-option
              v-for="item in excessTaskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.pid"
            class="!w-[160px]"
            placeholder="是否子任务"
            clearable
          >
            <el-option
              v-for="item in subTaskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.priority"
            collapse-tags
            placeholder="任务优先级"
            clearable
            class="!w-[120px]"
            multiple
          >
            <el-option
              v-for="item of options['assignment.ImagesAssignment']?.[0].priorityText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <select-personnel
            v-model="form.handle_user"
            :multiple="true"
            placeholder="处理人员"
          ></select-personnel>
          <div class="vx-table__form-handle">
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </template>
    </v-form>

    <el-tabs class="px-2" v-model="active">
      <el-tab-pane label="图表" :name="1">
        <div class="overflow-y-auto box">
          <el-row :gutter="16" style="margin-left: 0; margin-right: 0">
            <el-col :span="6" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>工作目标完成情况</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('total_count')"
                    ></svg-icon>
                  </div>
                </template>
                <div class="h-[320px]">
                  <div class="text-center text-[70px] font-bold text-[#3487FF] py-[70px]">
                    {{ datum.electronicTotal?.all || "0" }}
                  </div>
                  <div class="text-center text-[30px] text-[#3487FF]">总目标</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>工作目标完成情况</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('finish_total')"
                    ></svg-icon>
                  </div>
                </template>
                <div class="h-[320px]">
                  <div class="text-center text-[70px] font-bold text-[#3487FF] py-[70px]">
                    {{ datum.electronicTotal?.finish || "0" }}
                  </div>
                  <div class="text-center text-[30px] text-[#3487FF]">已完成目标</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4"> </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>平均交付天数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('average_day')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.deliveryAverageDay"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>各类型任务数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('task_type_count')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.taskTypeCount"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>老品各等级平均交付天数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('old_average_day')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.oldProductDay"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>老品各等级任务数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('old_task_type_count')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.oldTaskTypeCount"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="24" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>绩效统计</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('electronic_performance')"
                    ></svg-icon>
                  </div>
                </template>
                <barDatasetEcharts
                  :options="datum.imagesStatisticPerformance"
                ></barDatasetEcharts>
              </el-card>
            </el-col>
            <el-col :span="24" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>目标情况统计</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('electronic_target_detail')"
                    ></svg-icon>
                  </div>
                </template>
                <barDatasetEcharts
                  :options="datum.imagesStatisticTargetPercent"
                ></barDatasetEcharts>
              </el-card>
            </el-col>
            <el-col :span="24" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>目标分布占比</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('electronic_target_percent')"
                    ></svg-icon>
                  </div>
                </template>
                <barStackEcharts
                  :options="datum.imagesStatisticTargetDetail"
                ></barStackEcharts>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="表格" :name="2">
        <div class="overflow-y-auto box">
          <el-row :gutter="16" style="margin-left: 0; margin-right: 0">
            <el-col :span="24" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>绩效统计</span>
                    <svg-icon icon-class="tongji" @click="refresh"></svg-icon>
                  </div>
                </template>
                <el-table
                  :data="tableData"
                  border
                  fit
                  class="w-full"
                  
                >
                  <el-table-column label="人员" prop="name"></el-table-column>
                  <el-table-column label="图片绩效"></el-table-column>
                  <el-table-column label="任务绩效"></el-table-column>
                  <el-table-column label="目标套数"></el-table-column>
                  <el-table-column label="激励套数"></el-table-column>
                  <el-table-column label="交付完成率"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>任务平均交付天数及任务量统计</span>
                    <svg-icon icon-class="tongji" @click="refresh"></svg-icon>
                  </div>
                </template>
                <el-table
                  :data="tableData"
                  border
                  fit
                  class="w-full"
                  
                >
                  <el-table-column label="任务类型" prop="name"></el-table-column>
                  <el-table-column label="平均交付天数"></el-table-column>
                  <el-table-column label="任务量统计"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>老品任务平均交付天数及任务量统计</span>
                    <svg-icon icon-class="tongji" @click="refresh"></svg-icon>
                  </div>
                </template>
                <el-table
                  :data="tableData"
                  border
                  fit
                  class="w-full"
                  
                >
                  <el-table-column label="产品等级" prop="name"></el-table-column>
                  <el-table-column label="平均交付天数"></el-table-column>
                  <el-table-column label="任务量统计"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>目标分布占比</span>
                    <svg-icon icon-class="tongji" @click="refresh"></svg-icon>
                  </div>
                </template>
                <el-table
                  :data="tableData"
                  border
                  fit
                  class="w-full"
                  
                >
                  <el-table-column label="人员" prop="name"></el-table-column>
                  <el-table-column label="基本目标"></el-table-column>
                  <el-table-column label="超额目标"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </vPage>
  <comDetails ref="comDetailsRef" />
</template>
<script name="TaskStatistics-board-electronics" setup>
import VForm from "@/components/VForm/index.vue";
import { getOptions } from "@/api/index";
import {
  dateOptions,
  productOptions,
  excessTaskOptions,
  subTaskOptions,
} from "./data.js";
import barEcharts from "@/components/Echarts/barEcharts";
import barStackEcharts from "@/components/Echarts/barStackEcharts";
import barDatasetEcharts from "@/components/Echarts/barDatasetEcharts";
import comDetails from "./components/comDetails.vue";
import {
  getElectronicTotal,
  getAverageDay,
  getTaskTypeCount,
  getOldProductDay,
  getOldTaskTypeCount,
  getImagesStatisticPerformance,
  getImagesStatisticTargetPercent,
  getImagesStatisticTargetDetail,
} from "./api/index.js";
import { getCurrentDayNumber } from "@/utils/index.js";

const formRef = ref();
const tableOptins = reactive({
  formConfig: {
    productName: { type: "sku", value: "" },
    dateRange: { type: "create_time", value: [], range: true },
    performance_month: getCurrentDayNumber(),
  },
});

const data = reactive({
  options: {},
  active: 1,
  datum: {
    electronicTotal: null,
    deliveryAverageDay: null,
    taskTypeCount: null,
    oldProductDay: null,
    oldTaskTypeCount: null,
    targetDistributionProportion: {
      title: "",
      seriesData: ["基本目标", "超额目标"],
      yAxisData: [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
      ],
      xAxisData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      yAxisName: "单位：分",
    },
    actualAchievement: {
      title: "",
      yAxisData: [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
      ],
      xAxisData: [
        "2015",
        "2016",
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
        "2023",
        "2024",
        "2025",
      ],
    },
  },
  tableData: [],
  form: null,
});

const { options, active, datum, tableData, form } = toRefs(data);
// 下拉数据
const fetchOption = () => {
  getOptions({ name: ["assignment.ImagesAssignment", "assignment.ImagesTag"] }).then(
    (res) => {
      options.value = res.data;
    }
  );
};
fetchOption();

const query = () => {
  form.value = formRef.value.getQueryForm();
  getBoard();
};

const resetForm = () => {
  formRef.value.resetForm();
  form.value = formRef.value.getQueryForm();
  getBoard();
};

// 统计详情
const comDetailsRef = ref();
const viewDetails = (type) => {
  comDetailsRef.value.open({
    type,
    ...form.value,
  });
};

// 获取图表
const getBoard = async () => {
  form.value = formRef.value.getQueryForm();
  getElectronicTotalList();
  getAverageDayList();
  getTaskTypeCountList();
  getOldProductDayList();
  getOldTaskTypeCountList();
  getImagesStatisticPerformanceList();
  getImagesStatisticTargetPercentList();
  getImagesStatisticTargetDetailList();
};

// 工作目标完成情况
const getElectronicTotalList = async () => {
  try {
    const res = await getElectronicTotal(form.value);
    datum.value.electronicTotal = res.data;
  } catch (e) {
    throw Error(e);
  }
};

// 平均交付天数
const getAverageDayList = async () => {
  try {
    const res = await getAverageDay(form.value);
    const deliveryAverageDay = {
      title: "",
      yAxisName: "单位：天",
      seriesName: "平均交付天数",
      yAxisData: [],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        deliveryAverageDay.yAxisData.push(item.day);
        deliveryAverageDay.xAxisData.push(item.text);
      });
    }
    datum.value.deliveryAverageDay = deliveryAverageDay;
  } catch (e) {
    throw Error(e);
  }
};

// 任务类型需求数量
const getTaskTypeCountList = async () => {
  try {
    const res = await getTaskTypeCount(form.value);
    const taskTypeCount = {
      title: "",
      yAxisName: "单位：个",
      seriesName: "任务数",
      yAxisData: [],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        taskTypeCount.yAxisData.push(item.task_count);
        taskTypeCount.xAxisData.push(item.text);
      });
    }
    datum.value.taskTypeCount = taskTypeCount;
  } catch (e) {
    throw Error(e);
  }
};

// 老品各等级平均交付天数
const getOldProductDayList = async () => {
  try {
    const res = await getOldProductDay(form.value);
    const oldProductDay = {
      title: "",
      yAxisName: "单位：天",
      seriesName: "平均交付天数",
      yAxisData: [],
      xAxisData: [],
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        oldProductDay.yAxisData.push(item.day);
        oldProductDay.xAxisData.push(item.text);
      });
    }
    datum.value.oldProductDay = oldProductDay;
  } catch (e) {
    throw Error(e);
  }
};

// 老品各等级任务数
const getOldTaskTypeCountList = async () => {
  try {
    const res = await getOldTaskTypeCount(form.value);
    const oldTaskTypeCount = {
      title: "",
      yAxisName: "单位：个",
      seriesName: "任务数",
      yAxisData: [],
      xAxisData: [],
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        oldTaskTypeCount.yAxisData.push(item.task_count);
        oldTaskTypeCount.xAxisData.push(item.text);
      });
    }
    datum.value.oldTaskTypeCount = oldTaskTypeCount;
  } catch (e) {
    throw Error(e);
  }
};

const getImagesStatisticPerformanceList = async () => {
  try {
    const res = await getImagesStatisticPerformance(form.value);
    const imagesStatisticPerformance = {
      title: "",
      yAxisName: "单位：分",
      seriesName: "绩效统计",
      yAxisData: [],
      xAxisData: [],
      source: [["人员"], ["任务绩效分"], ["目标套数"], ["激励套数"]],
      series: [],
    };

    if (res.data?.length) {
      res.data.forEach((item) => {
        imagesStatisticPerformance.source[0].push(item.text);
        imagesStatisticPerformance.source[1].push(item.score);
        imagesStatisticPerformance.source[2].push(item.converted_quantity);
        imagesStatisticPerformance.source[3].push(item.incentive_number);
        imagesStatisticPerformance.series.push({
          type: "bar",
          label: {
            show: true,
            position: "top",
          },
        });
      });
    }
    datum.value.imagesStatisticPerformance = imagesStatisticPerformance;
  } catch (e) {
    throw Error(e);
  }
};

const getImagesStatisticTargetPercentList = async () => {
  try {
    const res = await getImagesStatisticTargetPercent(form.value);
    const imagesStatisticTargetPercent = {
      title: "",
      yAxisName: "单位：分",
      seriesName: "绩效统计",
      yAxisData: [],
      xAxisData: [],
      source: [["人员"], ["基本目标"], ["超额目标"]],
      series: [],
    };

    if (res.data?.length) {
      res.data.forEach((item) => {
        imagesStatisticTargetPercent.source[0].push(item.text);
        imagesStatisticTargetPercent.source[1].push(item.is_exceed_task_n || 0);
        imagesStatisticTargetPercent.source[2].push(item.is_exceed_task_y || 0);
        imagesStatisticTargetPercent.series.push({
          type: "bar",
          label: {
            show: true,
            position: "top",
          },
        });
      });
    }
    datum.value.imagesStatisticTargetPercent = imagesStatisticTargetPercent;
  } catch (e) {
    throw Error(e);
  }
};

const getImagesStatisticTargetDetailList = async () => {
  try {
    const res = await getImagesStatisticTargetDetail(form.value);
    const imagesStatisticTargetDetail = {
      title: "",
      yAxisName: "单位：分",
      seriesName: "绩效统计",
      seriesData: ["基本目标", "超额目标"],
      yAxisData: [[], []],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    res.data.basic.forEach((item) => {
      imagesStatisticTargetDetail.xAxisData.push(item.text);
      imagesStatisticTargetDetail.yAxisData[0].push(item.count);
    });
    res.data.exceed.forEach((item) => {
      imagesStatisticTargetDetail.yAxisData[1].push(item.count);
    });
    datum.value.imagesStatisticTargetDetail = imagesStatisticTargetDetail;
  } catch (e) {
    throw Error(e);
  }
};

onMounted(() => {
  getBoard();
});
</script>
<style lang="scss" scoped>
.box {
  height: calc(100vh - 250px);
}
:deep(.el-card__header) {
  background: var(--base-table-hover-bg-color);
}
</style>
